<template>
  <div class="department-container">
    <div class="app-container">
      <el-card>
        <!-- 具体页面结构 -->
        组织架构
        <div class="company">
          <div class="c-left">{{ companyInfo.name }}</div>
          <div class="c-right">
            <div class="cr-left">负责人</div>
            <div class="cr-right">
              <el-dropdown>
                <span class="el-dropdown-link">
                  操作<i class="el-icon-arrow-down el-icon--right" />
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click="addDepartment('')">添加子部门</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>

        </div>
        <div class="tree">
          <!-- @node-click="handleNodeClick"  @click="testScope(depaetmentData)"-->
          <el-tree :data="data" :props="defaultProps">
            <div slot-scope="{data:departmentData}" class="company">
              <div class="c-left">{{ departmentData.name }}</div>
              <div class="c-right">
                <div class="cr-left">{{ departmentData.manager }}</div>
                <div class="cr-right">
                  <el-dropdown>
                    <span class="el-dropdown-link">
                      操作<i class="el-icon-arrow-down el-icon--right" />
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item @click.native="addDepartment(departmentData)">添加子部门</el-dropdown-item>
                      <el-dropdown-item @click.native="editDepartment(departmentData)">编辑部门</el-dropdown-item>
                      <el-dropdown-item v-if="!departmentData.children || departmentData.children.length === 0" @click.native="deleteDepBtn(departmentData)">删除部门</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
              </div>

            </div>
          </el-tree></div>
      </el-card>
    </div>
    <el-dialog
      v-if="dialogVisible"
      :title="isEdit?'编辑部门':'新增部门'"
      :visible.sync="dialogVisible"
      width="50%"

      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <update-dialog
        ref="dialogRef"
        :current-id="currentId"
        :is-edit="isEdit"
        :arr-list-to-child="arrListToChild"
        @closeEvent="dialogVisible= false"
        @success="updateDepartMent"
      />
    </el-dialog>
  </div>
</template>
<script>
import { getDpmRequest, deleteDepartByIdRequest } from '@/api/department'
import { transformListToTree } from '@/utils/index'
import UpdateDialog from './UpdateDialog.vue'
export default {
  components: {
    UpdateDialog
  },
  data() {
    return {
      data: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      companyInfo: {},
      // 模态框的状态,true打开.false关闭
      dialogVisible: false,
      currentId: '',
      // 当前模态框是编辑还是添加
      isEdit: false,
      //
      arrListToChild: []
    }
  },
  created() {
    this.getDepartmentInfo()
  },
  methods: {
    // handleNodeClick(data) {
    //   console.log(data)
    // },
    async getDepartmentInfo() {
      try {
        const res = await getDpmRequest()
        // console.log(res)
        this.arrListToChild = res.data.depts.map(item => {
          return {
            id: item.id,
            pid: item.pid,
            name: item.name,
            code: item.code
          }
        })
        this.companyInfo = res.data.depts.shift()
        this.data = transformListToTree(res.data.depts)
        // console.log(this.data)
        // console.log(this.companyInfo)
      } catch (error) {
        console.log('获取部门数据失败!')
      }
    },
    /*
     getDepartmentInfoReqest().then(res => {
        // then有两个参数，都是函数，第一个函数是 请求成功后执行，第二个函数是请求失败后执行
        console.log('请求成：', res)
        this.companyInfo = res.data.depts.shift()
        // this.data = res.data.depts
        this.data = transformListToTree(res.data.depts)
      }, err => {
        console.log('请求失败：', err)
      })
    */

    // testScope(a, b) {
    //   console.log(a)
    //   console.log(b)
    // }
    // dialog组件方法
    // handleClose(done) {
    //   this.$confirm('确认关闭？')
    //     .then(_ => {
    //       done()
    //     })
    //     .catch(_ => {})
    // }
    // 添加子部门成员
    addDepartment(param) {
      this.isEdit = false
      // console.log(param)
      if (param) {
        this.currentId = param.id
      } else {
        this.currentId = ''
      }
      this.dialogVisible = true
    },
    // 编辑子部门成员信息
    editDepartment(param) {
      this.isEdit = true
      this.currentId = param.id
      this.dialogVisible = true
      // console.log(this.currentId)
      // this.$nextTick(() => {
      //   this.$refs.dialogRef.getDeparmentById()
      // })
    },
    // 删除部门信息
    async deleteDepartment(id) {
      await deleteDepartByIdRequest(id)
      this.getDepartmentInfo()
    },
    deleteDepBtn(params) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 我们这里是点击了确定，就去调用删除的方法
        this.deleteDepartment(params.id)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    updateDepartMent() {
      // console.log('更新数据')
      this.dialogVisible = false
      this.getDepartmentInfo()
    }

  }
}
</script>
<style lang="scss">
.app-container{
  // 结构样式
  .company{
    width: 100%;
    // 容器
    display:flex;
    // 项目
    .c-left {
      flex : 1 1 60%;
      padding: 5px;
      // background-color: skyblue;
    }
    .c-right {
      flex : 1 1 40%;
      // background-color: pink;
      padding: 5px;
      display: flex;
      .cr-left{
        flex: 1 1 50%;
      }
      .cr-right{
        flex: 1 1 50%;
      }
    }

  }
  // 下拉菜单样式
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }

}
</style>
